
<script type="text/javascript">

 $(document).ready(function() {
/*
* In-Field Label jQuery Plugin
* http://fuelyourcoding.com/scripts/infield.html
*
* Copyright (c) 2009 Doug Neiner
* Dual licensed under the MIT and GPL licenses.
* Uses the same license as jQuery, see:
* http://docs.jquery.com/License
*
* @version 0.1
*/
(function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);


    $("#RegisterUserForm label").inFieldLabels();
});

</script>
<div id="registration">
 <h2>Create an Account</h2>

 <form id="RegisterUserForm" action="" method="post">
 	<fieldset>
         <p>
            <label for="name">UserName</label>
            <input id="name" name="txt_username" type="text" class="text" value="" />
         </p>
        
         <p>
            <label for="email">Email</label>
            <input id="email" name="txt_email" type="email" class="text" value="" />
         </p>
        
         <p>
            <label for="password">Password</label>
            <input id="password" name="txt_password" class="text" type="password" />
         </p>
         
         <p id="birthday-box">
             <select id="month" name="m">
       		  <option value="" selected="selected">Month</option>
              <option value="1">January</option>
              <option value="2">February</option>
              <option value="3">March</option>
              <option value="4">April</option>
              <option value="5">May</option>
              <option value="6">June</option>
              <option value="7">July</option>
              <option value="8">August</option>
        	  <option value="9">September</option>
        	  <option value="10">October</option>
        	  <option value="11">November</option>
        	  <option value="12">December</option>
            </select>
        	<select id="day" name="d">
     	      <option value="" selected="selected">Day</option>
              <?php for($i=1;$i<=31;$i++) {?>
              <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
              <?php } ?>
            </select>
        	<select id="year" name="y">
            	<option value="" selected="selected">Year</option>
                <?php for($i=1970;$i<=2000;$i++) {?>
              <option value="<?php echo $i; ?>"><?php echo $i; ?></option>
              <?php } ?>
            </select>
         </p>
         
         <p>
            <label for="gender">Gender</label>
            <input type="radio" name="txt_sex" value="Male" checked="checked" />Male
            <input type="radio" name="txt_sex" value="Female" />Female
         </p>
         
         <p id="location-box">
            <label for="location">Location</label>
            <select id="location" name="location" class="text" >
                <option value="Argentina">Argentina</option>
                <option value="Austria">Austria</option>
                <option value="Australia">Australia</option>
                <option value="Angola">Angola</option>
                <option value="Bolivia">Bolivia</option>
                <option value="Brazil">Brazil</option>
                <option value="Canada">Canada</option>
                <option value="China">China</option>
                <option value="Chile">Chile</option>
                <option value="Colombia">Colombia</option>
                <option value="Cuba">Cuba</option>
                <option value="Denmark">Denmark</option>
                <option value="England">England</option>
                <option value="Ecuador">Ecuador</option>
                <option value="Egypt">Egypt</option>
                <option value="France">France</option>
                <option value="Germany">Germany</option>
                <option value="Haiti">Haiti</option>
                <option value="Indonesia">Indonesia</option>
                <option value="Jamaica">Jamaica</option>
                <option value="Japan">Japan</option>
                <option value="Korea">Korea</option>
                <option value="Malaysia">Malaysia</option>
                <option value="Mexico">Mexico</option>
                <option value="Paraguay">Paraguay</option>
                <option value="Peru">Peru</option>
                <option value="Singapore">Singapore</option>
                <option value="Russia">Russia</option>  
                <option value="Turkey">Turkey</option>
                <option value="Thailand">Thailand</option>
                <option value="Venezuela">Venezuela</option>
                <option value="Vietnam">Vietnam</option>
                <option value="Uruguay">Uruguay</option>
                <option value="USA">USA</option>           
            </select>
         </p>
        
         <p><input id="acceptTerms" name="acceptTerms" type="checkbox" />
            <span style="font-size: 11px !important ; margin-left:5px;">
                I agree to the <a href="">Terms and Conditions</a> and <a href="">Privacy Policy</a>
                </span> 
                <input id="registerNew" type="submit" name="submit" value="Register" />
         </p>
 	</fieldset>

 </form>
</div>

<script type="text/javascript">
        $(document).ready(function() {
			/*
			* In-Field Label jQuery Plugin
			* http://fuelyourcoding.com/scripts/infield.html
			*
			* Copyright (c) 2009 Doug Neiner
			* Dual licensed under the MIT and GPL licenses.
			* Uses the same license as jQuery, see:
			* http://docs.jquery.com/License
			*
			* @version 0.1
			*/
		(function($) { $.InFieldLabels = function(label, field, options) { var base = this; base.$label = $(label); base.$field = $(field); base.$label.data("InFieldLabels", base); base.showing = true; base.init = function() { base.options = $.extend({}, $.InFieldLabels.defaultOptions, options); base.$label.css('position', 'absolute'); var fieldPosition = base.$field.position(); base.$label.css({ 'left': fieldPosition.left, 'top': fieldPosition.top }).addClass(base.options.labelClass); if (base.$field.val() != "") { base.$label.hide(); base.showing = false; }; base.$field.focus(function() { base.fadeOnFocus(); }).blur(function() { base.checkForEmpty(true); }).bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }).change(function(e) { base.checkForEmpty(); }).bind('onPropertyChange', function() { base.checkForEmpty(); }); }; base.fadeOnFocus = function() { if (base.showing) { base.setOpacity(base.options.fadeOpacity); }; }; base.setOpacity = function(opacity) { base.$label.stop().animate({ opacity: opacity }, base.options.fadeDuration); base.showing = (opacity > 0.0); }; base.checkForEmpty = function(blur) { if (base.$field.val() == "") { base.prepForShow(); base.setOpacity(blur ? 1.0 : base.options.fadeOpacity); } else { base.setOpacity(0.0); }; }; base.prepForShow = function(e) { if (!base.showing) { base.$label.css({ opacity: 0.0 }).show(); base.$field.bind('keydown.infieldlabel', function(e) { base.hideOnChange(e); }); }; }; base.hideOnChange = function(e) { if ((e.keyCode == 16) || (e.keyCode == 9)) return; if (base.showing) { base.$label.hide(); base.showing = false; }; base.$field.unbind('keydown.infieldlabel'); }; base.init(); }; $.InFieldLabels.defaultOptions = { fadeOpacity: 0.5, fadeDuration: 300, labelClass: 'infield' }; $.fn.inFieldLabels = function(options) { return this.each(function() { var for_attr = $(this).attr('for'); if (!for_attr) return; var $field = $("input#" + for_attr + "[type='text']," + "input#" + for_attr + "[type='password']," + "input#" + for_attr + "[type='tel']," + "input#" + for_attr + "[type='email']," + "textarea#" + for_attr); if ($field.length == 0) return; (new $.InFieldLabels(this, $field[0], options)); }); }; })(jQuery);
        	$("#RegisterUserForm label").inFieldLabels();
		});
</script>